<template>
  <div class="markdown-body" v-html="compiledMarkdown"></div>
</template>

<script lang="ts" setup>
import { Marked } from 'marked';
import { markedHighlight } from "marked-highlight";
import hljs from 'highlight.js';
import { computed } from 'vue';
import javascript from 'highlight.js/lib/languages/javascript';

hljs.registerLanguage('javascript', javascript);

const marked = new Marked(
  markedHighlight({
	emptyLangClass: 'hljs',
    langPrefix: 'hljs language-',
    highlight(code, lang) {
      console.log(lang)
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    }
  })
);

const props = defineProps({
  markdown: {
      type: String,
      required: true
    }
})
const compiledMarkdown = computed(() => {
  return marked.parse(props.markdown);
})
</script>

<style scoped>
.markdown-body {
  padding: 16px 24px;
}
</style>
